<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
</head>
<body>


    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
        </div>
    </div>
    <div class="container">
        <form class="mb-5" onsubmit="return false">
            <div class="form-group">
                <input type="text" id="ipt" class="form-control" placeholder="在此输入任务...">
            </div>
            <button type="submit" id="btn" class="btn btn-primary btn-block">添加</button>
        </form>
        <ul class="list-group" id="ul">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                学习 HTML
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </li>
        </ul>

</div>

    <script>
    let lists = ['学习 JavaScript','学习 css3','学习 HTML5'];

function d() {

        document.querySelector('#ul').innerHTML = ''
        for(let i = 0;i < lists.length;i++){
            let li = document.createElement('li');
            li.classList.add('list-group-item');
            li.classList.add('d-flex');
            li.classList.add('justify-content-between');
            li.classList.add('align-items-center');

            let span = document.createElement('span');
            let spanText = document.createTextNode(lists[i]);
            span.appendChild(spanText);

            span.addEventListener('dblclick',function () {
                this.setAttribute('contenteditable',true)
            })

            let button = document.createElement('button');
            button.type= 'button';
            button.classList.add('close');
            button.innerHTML = '&times;';
            button.addEventListener('click',function () {
                lists.splice(i,1);
                d()
            });


            li.appendChild(span);
            li.appendChild(button);
            let ul = document.querySelector('#ul');
            ul.appendChild(li)
        }
}
d();
        let ipt = document.querySelector('#ipt');
        let btn = document.querySelector('#btn');
        btn.addEventListener('click',function () {
            if(ipt.value != ''){
                lists.push(ipt.value);
            }else{
                alert('请输入内容')
            }
            d()
        })


    </script>
</body>
</html>